import React, { useEffect, useState } from "react";
import { Form, Input, Button, Upload,message } from 'antd';
import { InboxOutlined } from '@ant-design/icons';
import request from '../../../static/requests'
import { useForm } from "antd/lib/form/Form";
import { useHistory } from "react-router-dom";
const formItemLayout = {
    labelCol: {
        span: 6,
    },
    wrapperCol: {
        span: 14,
    },
};
const normFile = (e) => {
    if (Array.isArray(e)) {
        return e;
    }
    return e && e.fileList;
};
export default () => {
    let hist = useHistory();
    const [form] =Form.useForm();
    const onFinish =async (values) => {
        console.log(values);
        let data = await request("https://budbud.top/background/banner/updata", {
            method: "POST",
            data: values
        })

        if(data.data.code==0){
            message.success(data.data.msg)
            hist.push("/")
            }
    };
    useEffect(() => {
        form.setFieldsValue(history.state.state)
    }, []);
    return (
        <Form
            name="validate_other"
            {...formItemLayout}
            onFinish={onFinish}
            form = {form}
        >
            <Form.Item label="修改">
                <span className="ant-form-text">轮播图片</span>
            </Form.Item>
            <Form.Item
                name="id"
                label="id"
            >
                <Input readOnly />
            </Form.Item>
            <Form.Item
                name="title"
                label="标题"
            >
                <Input />
            </Form.Item>

            <Form.Item name="image" label="原图">
            <img src={history.state.state.image} width="200px"></img>
        </Form.Item>
            <Form.Item label="修改图片">
              <Form.Item name="dragger" valuePropName="fileList" getValueFromEvent={normFile} noStyle>
                    <Upload.Dragger name="files" action="https://budbud.top/background/upload/image">
                        <p className="ant-upload-drag-icon">
                            <InboxOutlined />
                        </p>
                        <p className="ant-upload-text">请选择你的图片</p>
                    </Upload.Dragger>
                </Form.Item>
            </Form.Item>
            <Form.Item
                wrapperCol={{
                    span: 12,
                    offset: 6,
                }}
            >
                <Button type="primary" htmlType="submit" >
                    修改
                </Button>
                <Button type="primary" onClick={()=> hist.push("/")}  style={{ margin: "0 20px", }}>
                    返回首页
                </Button>
            </Form.Item>
        </Form>
    );
};
